<template>
  <section id="app">
    <h1>todos</h1>
    <!-- 顶部开始 -->
    <div class="todolist">
      <div class="search">
        <div class="se-left">
          <!-- <label for="se_checkbox" class="allList_check"></label> -->
          <input
            type="checkbox"
            id="se_checkbox"
            :class="['checkAll', { checkAlls: checkAlls }]"
            @click.stop="handelcheckAll"
            v-model="checkAlls"
          />
        </div>
        <div class="se-right">
          <input
            type="text"
            class="search_input"
            placeholder="你想干点啥玩意？"
            v-model="title"
            @keyup.enter="addTodos"
          />
        </div>
      </div>
      <!-- 顶部结束 -->
      <div class="mian">
        <ul class="view">
          <li class="item" v-for="(item, index) in filterTodos" :key="item.id">
            <div class="checkbox">
              <!-- <label for="list_checkbox" class="List_check"></label> -->
              <input
                type="checkbox"
                id="list_checkbox"
                class="listCheck"
                v-model="item.done"
              />
            </div>
            <p
              :class="['item_count', { complate: item.done }]"
              @dblclick="editClick(index)"
            >
              <span :class="['title', { hidden: edit_index === index }]">{{
                item.name
              }}</span>
              <input
                type="text"
                :ref="`edit-${index}`"
                :class="[{ hidden: edit_index !== index }]"
                v-model="item.name"
                @blur="saveCount(item.id)"
              />
            </p>
            <button @click.stop="deleteItem(index)">删除</button>
          </li>
        </ul>
      </div>
      <!-- 底部开始 -->
      <div class="footer">
        <p class="foot_left">
          <span>{{ unfinished }}</span
          >项剩余
        </p>
        <p class="foot_mid">
          <span
            :class="['mid_left', { active: activeTab === 'all' }]"
            @click.stop="handelItemClick('all')"
            >全部</span
          >
          <span
            :class="['mid_center', { active: activeTab === 'active' }]"
            @click.stop="handelItemClick('active')"
            >完成</span
          >
          <span
            :class="['mid_right', { active: activeTab === 'complate' }]"
            @click.stop="handelItemClick('completed')"
            >未完成</span
          >
          <span @click.stop="handleClearCompleted">清除已完成</span>
        </p>
        <p class="foot_right" @click.stop="clearAllClick">清除所有</p>
      </div>
      <!-- 底部结束 -->
    </div>
  </section>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      title: "",
      edit_index: -1,
      // editVal: "",
    };
  },
  computed: {
    ...mapState(["todos"]),
    ...mapGetters(["filterTodos", "activeTab", "unfinished", "checkAlls"]),
  },
  methods: {
    //添加todolist
    addTodos() {
      if (!this.title) {
        alert("干嘛呢 要输入内容啊铁子");
      } else {
        this.$store.commit({
          type: "addTodos",
          payload: {
            id: new Date().getTime(),
            name: this.title,
            done: false,
          },
        });
        this.title = "";
      }
    },

    //删除当前todolist
    deleteItem(index) {
      // console.log(index);
      this.$store.commit({
        type: "deleteItem",
        payload: {
          index: index,
        },
      });
    },

    //删除当前所有tudos
    clearAllClick() {
      this.$store.commit({
        type: "clearAllClick",
      });
    },

    //清除完成的项目
    handleClearCompleted() {
      this.$store.commit("handleClearCompleted");
    },
    //更改activeTab状态
    handelItemClick(activeTab) {
      this.$store.commit({
        type: "changeActiveTab",
        payload: {
          activeTab,
        },
      });
    },

    //编辑内容
    editClick(index) {
      this.edit_index = index;
      // this.editVal = val;

      this.$nextTick(function () {
        this.$refs[`edit-${index}`][0].focus();
        this.$refs[`edit-${index}`][0].select();
      });
    },
    //保存替换编辑的内容
    saveCount() {
      // let index = this.todos.findIndex((item) => {
      //   return item.id === id;
      // });
      // this.todos[index].name = this.editVal;
      // // console.log(index);
      this.edit_index = -1;
    },
    handelcheckAll() {
      this.$store.commit("checkAll");
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
::-webkit-input-placeholder {
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  color: #cccccc;
}
.hidden {
  display: none;
}
body,
html {
  width: 100%;
  height: 100%;
  // background: #f5f5f5;
}
section {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  h1 {
    font-size: 80px;
    opacity: 0.4;
    text-align: center;
    color: red;
  }
  .todolist {
    width: 512px;
    margin: 0 auto;
    background: #fff;
    border: 0.5px solid #cccccc;

    .search {
      width: 510px;
      height: 60px;
      background: white;
      margin: 0 auto;
      display: flex;
      padding: 5px 15px;
      align-items: center;
      border-bottom: 2px solid #cccccc;

      .se-left {
        width: 40px;
        height: 40px;
        position: relative;
        padding: 8px 0;
        .allList_check {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid #cccccc;
          font-size: 20px;
          font-weight: bold;
          background: #fff;
          display: inline-block;
          color: red;
          cursor: pointer;
        }
        .checkAll {
          position: absolute;
          width: 25px;
          height: 25px;
          top: 10px;
          left: 2px;
        }
      }

      .se-right {
        width: 350px;
        height: 40px;
        padding-left: 10px;
        line-height: 40px;
        .search_input {
          width: 348px;
          height: 38px;
          border: 0;
          outline: none;
        }
      }
    }
    .mian {
      width: 100%;
      .view {
        widows: 100%;
        .item {
          padding: 0 15px;
          width: 100%;
          display: flex;
          align-items: center;
          p {
            width: 390px;
          }
          width: 100%;
          .checkbox {
            width: 40px;
            height: 40px;
            position: relative;
            padding: 8px 0;
            .List_check {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid #cccccc;
              font-size: 20px;
              font-weight: bold;
              background: #fff;
              display: inline-block;
              color: red;
              z-index: 99;
            }

            .listCheck {
              // opacity: 0;
              position: absolute;
              width: 25px;
              height: 25px;
              top: 10px;
              left: 2px;
            }
          }
          button {
            width: 35px;
            height: 25px;
          }
        }
      }
    }
    .footer {
      width: 510px;
      height: 40px;
      background: #fff;
      display: flex;
      align-items: center;
      font-size: 14px;
      padding: 10px;
      color: #bbb;
      .foot_left {
        width: 104px;
        cursor: pointer;
      }

      .foot_mid {
        width: 250px;
        display: flex;
        justify-content: space-around;
        cursor: pointer;
        margin-left: 20px;
      }

      .foot_right {
        width: 60px;
        cursor: pointer;
        text-align: center;
        margin-left: 80px;
      }
    }
  }
}
</style>
